<template>
    <div class="Addahouse">
         <!-- 添加商铺表头 -->
        <div class="AddCommunitytitle">
            <p @click="back">
                <i class="el-icon-arrow-left"></i>
                <span>商铺添加</span>
            </p>
            <p>
                <span class="must">*</span>
                <span>为必填项</span>
            </p>
        </div>
        <!-- 添加商铺输入框内容 -->
        <div class="Addahousecontent">
            <div class="Addahousecontenttop">
                <div class="contenttopleft">
                    <div class="payloader">
                        <p class="title">
                            <span class="starred">*</span>
                            <span class="text">社区名称：</span>
                        </p>
                        <el-select v-model="communityName" placeholder="请选择社区" class="storeid">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label" >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="payloader">
                        <p class="title">
                            <span class="starred">*</span>
                            <span class="text">商铺编号：</span>
                        </p>
                        <el-input
                        placeholder="请输入商铺编号"
                        v-model="ShopNumber"
                        clearable class="countent">
                        </el-input>
                    </div>
                    <div class="payloader">
                        <p class="title">
                            <span class="starred"></span>
                            <span class="text">建筑面积：</span>
                        </p>
                        <el-input
                        placeholder="请输入建筑面积"
                        v-model="buildingarea"
                        clearable class="countent">
                        </el-input>
                    </div>
                     <div class="payloader">
                        <p class="title">
                            <span class="starred"></span>
                            <span class="text">房屋类型：</span>
                        </p>
                        <el-input
                        placeholder="请输入房屋类型"
                        disabled
                        v-model="Housetype"
                        clearable class="countent">
                        </el-input>
                    </div>
                </div>
                <div class="contenttopleft">
                    <div class="payloader">
                        <p class="title">
                            <span class="starred">*</span>
                            <span class="text">商铺区域：</span>
                        </p>
                        <el-select v-model="Shoparea" placeholder="请选择商铺区域" class="storeid">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value" >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="payloader">
                        <p class="title">
                            <span class="starred">*</span>
                            <span class="text">所在楼层：</span>
                        </p>
                        <el-input
                        placeholder="请输入楼层"
                        v-model="Floor"
                        clearable class="countent">
                        </el-input>
                    </div>
                    <div class="payloader">
                        <p class="title">
                            <span class="starred"></span>
                            <span class="text"> 使用面积：</span>
                        </p>
                        <el-input
                        placeholder="请输入使用面积"
                        v-model="usablearea"
                        clearable class="countent">
                        </el-input>
                    </div>
                    <div class="payloader">
                        <p class="title">
                            <span class="starred">*</span>
                            <span class="text">房屋状态：</span>
                        </p>
                        <el-select v-model="Housingstatus" placeholder="请选择房屋状态" class="storeid">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value" >
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <!-- 备注信息 -->
            <div class="Addahousecontentbottom">
                <div class="notesinformation">
                    <p class="title">
                        <span class="starred"></span>
                        <span class="text">备注信息：</span>
                    </p>
                    <el-input
                        type="textarea"
                        placeholder="请输入备注信息"
                        v-model="note"
                        maxlength="300"
                        show-word-limit
                        class="textarea">
                    </el-input>
                </div>
            </div>
        </div>
        <!-- 添加商铺保存按钮 -->
        <div class="contentfooter">
            <el-button type="primary" class="savebutton" @click="save"><i class="el-icon-document-checked"></i>保存</el-button>
            <el-button plain class="reseatebutton" @click="reseate"><i class="el-icon-refresh-left"></i>重置</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            communityName:'',//社区名称
            ShopNumber:'',   //商铺编号
            buildingarea:'', //建筑面积
            Shoparea:'',     //商铺区域
            Floor:'',        //所在楼层
            usablearea:'',   //使用面积
            Housetype:'商铺',    //房屋类型
            Housingstatus:'',//房屋状态
            note:'',         //备注
            options: [{
            value: '选项1',
            label: '小区一'
            }, {
            value: '选项2',
            label: '小区二'
            }, {
            value: '选项3',
            label: '小区三'
            }, {
            value: '选项4',
            label: '小区四'
            }, {
            value: '选项5',
            label: '小区五'
            }],     //下拉选项
        }
    },
    methods:{
        back(){
            this.$router.go(-1)
        },
        // 清空
        clear(){
            this.communityName=''
            this.ShopNumber=''
            this.buildingarea=''
            this.Shoparea=''
            this.Floor=''
            this.usablearea=''
            this.Housingstatus=''
            this.note=''
        },
        // 成功提示
        success(text){
            this.$message({
                message: '数据'+text+'成功',
                type: 'success'
            });
            this.$router.go(-1)  //页面数据返回上一级
        },
        // 添加商铺底部保存 保存重建 重置按钮
        save(){
            console.log("保存")
            if(this.$route.query.i){
                this.$axios.post('http://127.0.0.1/shoplistupdate',{
                    communityName:this.communityName,
                    Shoparea:this.Shoparea,
                    ShopNumber:this.ShopNumber,
                    Floor:this.Floor,
                    buildingarea:this.buildingarea,
                    usablearea:this.usablearea,
                    Housetype:this.Housetype,
                    Housingstatus:this.Housingstatus,
                    date:this.$route.query.i
                }).then(res=>{
                    console.log(res)
                    this.success('修改')
                }).catch(err=>{
                    console.log(err)
                })
            }else{
                this.$axios.post('http://127.0.0.1/shoplistinsert',{
                    communityName:this.communityName,
                    Shoparea:this.Shoparea,
                    ShopNumber:this.ShopNumber,
                    Floor:this.Floor,
                    buildingarea:this.buildingarea,
                    usablearea:this.usablearea,
                    Housetype:this.Housetype,
                    Housingstatus:this.Housingstatus,
                }).then(res=>{
                    console.log(res)
                    this.success('添加')
                }).catch(err=>{
                    console.log(err)
                })
            }
        },
        reseate(){
            this.clear()
            console.log("重置")
        }
    },
    mounted(){
        if(this.$route.query.i){
            console.log(this.$route.query.i)
            this.$axios.get(`http://127.0.0.1/shoplistselect?date=${this.$route.query.i}`).then(res=>{
                console.log(res.data[0],11111111)
                this.communityName=res.data[0].Belongingcommunity
                this.ShopNumber=res.data[0].ShopNumber
                this.buildingarea=res.data[0].buildingarea
                this.Sharedarea=res.data[0].Sharedarea
                this.Housetype=res.data[0].Housetype
                this.Shoparea=res.data[0].Productarea
                this.Floor=res.data[0].Floorlocation
                this.usablearea=res.data[0].usablearea
                this.Housingstatus=res.data[0].Housingstatus
            }).catch(err=>{
                console.log(err)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .Addahouse{
        width: 1260px;  /* 最大1265px */ 
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        // 添加商铺标题
        .AddCommunitytitle{
            height: 60px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            & p:nth-child(1){
                color: #666666;
                font-size: 16px;
                font-family: 'Font Awesome 5 Pro Solid', 'Font Awesome 5 Pro';
                font-weight: 900;
                font-style: normal;
                height: 28px;
                line-height: 28px;
                cursor: pointer;
                .el-icon-arrow-left{
                    font-size: 16px !important;
                    color: #666666;
                    font-weight: 900 !important;
                }
            }
            & p:nth-child(2){
                color: #999;
                font-size: 12px;
                .must{
                    color: #FF3B30;
                    margin-right: 5px;
                }
            }
        }
        // 添加商铺输入框内容模块
        .Addahousecontent{
            width: 100%;
            padding: 0 60px 40px 40px;
            box-sizing: border-box;
            background-color: #fff;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            .Addahousecontenttop{
                width: 100%;
                display: flex;
                justify-content: space-between;
                .contenttopleft{
                     width: 520px;
                    margin-top: 30px;
                    .payloader{
                        width: 100%;
                        height: 40px;
                        margin-bottom: 25px;
                        display: flex;
                        align-items: center;
                        .title{
                            width: 120px;
                            padding-right: 20px;
                            font-size: 14px;
                            color: #666666;
                            box-sizing: border-box;
                            text-align: right;
                            .starred{
                                color: #FF3B30;
                            }
                        }
                        .note{
                            font-size: 14px;
                            color: #666666;
                        }
                        .countent{
                            width: 400px;
                            ::v-deep .el-input__inner:focus {
                                border-color: #C0C4CC !important;
                                outline: 0;
                            }
                        }
                        .housetype{
                            width: 400px;
                            display: flex;
                            align-items: center;
                            span{
                                font-size: 14px;
                                margin: 0 15px;
                                color: #666666;
                            }
                            .housetext{
                                width: 77px;
                            }
                            ::v-deep .el-input__inner:focus {
                                border-color: #C0C4CC !important;
                                outline: 0;
                            }
                        }
                        .datapicker{
                            width: 400px;
                            ::v-deep .el-input__inner:focus {
                                border-color: #C0C4CC !important;
                                outline: 0;
                            }
                        }
                        .storeid,.building{
                            width: 400px;
                                ::v-deep .el-input__inner {
                                    border-color: #C0C4CC !important;
                                }
                        }
                    }
                }
            }
            .Addahousecontentbottom{
                width: 100%;
                background-color: #fff;
                 // 备注信息
                .notesinformation{
                    display: flex;
                    .title{
                        width: 120px;
                        padding-right: 20px;
                        font-size: 14px;
                        color: #666666;
                        box-sizing: border-box;
                        text-align: right;
                        white-space: nowrap;
                        .starred{
                            color: #FF3B30;
                        }
                    }
                    .textarea{
                        width: 1020px;
                        height: 175px;
                        ::v-deep .el-textarea__inner{
                            width: 1020px;
                            height: 175px;
                        }
                        ::v-deep .el-textarea__inner {
                            border-color: #C0C4CC !important;
                            resize: none;
                        }
                    }
                }
            }
            
        }
        //添加商铺底部按钮
        .contentfooter{
            width: 100%;
            box-sizing: border-box;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            .savebutton,.reseatebutton{
                width: 140px;
                height: 40px;
                i{
                    margin-right: 5px;
                }
            }
            .savebutton{
                margin-right: 40px;
            }
            .createbutton{
                width: 160px;
                height: 40px;
                i{
                    margin-right: 5px;
                }
            }
            .el-button--primary{
                background-color: rgba(0, 121, 254, 1);
            }
            .el-button--primary:hover {
                background: #3394fe !important;
                border-color: #3394fe !important;
                color: #FFF !important;
            }
            .el-button.is-plain{
                border-color: rgba(0, 121, 254, 1);
                color: rgba(0, 121, 254, 1);
            }
            .el-button.is-plain:hover {
                background: #FFF !important;
                border-color: #409EFF;
                color: #409EFF !important;
            }
        }
    }
</style>